@import "common.less";

/*全局变量*/
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img {border:0;-ms-interpolation-mode: bicubic;max-width: 100%;}
a,button{outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0.3);}
input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none;}
html,body{height: 100%;}
body{
  font-family: PingFangSC-Light, Helvetica, "microsoft yahei", sans-serif;color:#000;position: relative;
  a{color:#333;text-decoration:none;cursor: pointer;}
}

//公用样式
.body{
  &:before {content: ''; position: fixed; z-index: -1; top: 0;bottom: 0; width: 100%;max-width:@sreen;background:#a8cee4 url("/src/img/bg.jpg") no-repeat 0 0;background-size: 100%;}
}
.disNone{display: none;}
.clearfix:before, .clearfix:after{content: " ";display: table;}
.clearfix:after{clear: both;}

//搜索框
.search-box{
  .search{
    position: fixed;z-index: 10;top: 0;width: 100%;max-width: @sreen;height: 100/@rem;border-bottom: 1px solid #41b7ef;background:#a8cee4 url("/src/img/bg.jpg") no-repeat 0 0;background-size: 100%;
    .logo{height: 50/@rem;margin-left: 38/@rem;margin-top: 28/@rem;float: left;
      img{height: 100%;}
    }
    .box{width: 380/@rem;padding: 0 36/@rem 0 60/@rem;box-sizing: border-box;height: 56/@rem;border-radius: 30px;float: left;margin: 23/@rem 0 0 80/@rem;background: url("/src/img/search-logo.png") #fff 20/@rem 14/@rem no-repeat;background-size: 30/@rem;
      input{width: 200/@rem;line-height: 24/@rem;border: 0;background: none;height: 100%;font-size: 26/@rem;
        &::-webkit-input-placeholder{line-height: 32/@rem;}
      }
      .btn{float: right;line-height: 56/@rem;font-size: 28/@rem;color: @color-blue;}
    }
    .choice{
      float: right;margin-right: 38/@rem;line-height: 56/@rem;height: 56/@rem;margin-top: 23/@rem;padding-left: 40/@rem;
      background: url("/src/img/search-choice.png") 8/@rem 10/@rem no-repeat;background-size: 28/@rem;font-size: 28/@rem;color: @color-blue;
    }
  }
  .alert-bg{position: fixed;top:0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.7);z-index: 10;}
  .alert{
    position: fixed;top: 0;right: -100%;width: 560/@rem;background-color: #e9f6fa;z-index: 10;padding-bottom: 100/@rem;
    .tit{line-height: 82/@rem;padding: 0 40/@rem;background-color: #c0daeb;font-size: 32/@rem;color: #728690;}
    .cont{padding: 0 40/@rem;}
    .btn-group{margin-left: -2%;
      .btn{border: 1px solid #2871d5;width: 47%;margin-left: 2%;background-color: #2871d5;color: #fff;border-radius: 10px;display: inline-block;font-size: 28/@rem;height: 84/@rem;margin-top: 30/@rem;}
      .btn-kong{background-color: transparent;color: #2871d5;}
    }
    .list{border-top: 1px solid #a8cee4;
      &:first-child{border: 0;}
      .type{color: #728690;font-size: 24/@rem;line-height: 60/@rem;}
      .ul{overflow: hidden;margin-left: -16/@rem;
        &.grade{
          li{line-height: 56/@rem;width: 56/@rem;text-align: center;padding: 0;}
        }
        li{float: left;margin-left: 16/@rem;margin-bottom: 16/@rem;line-height: 80/@rem;padding: 0 20/@rem;border-radius: 8px;border:1px solid #9ab7d6;color: #6690bc;
          &.true{background-color: #2871d5;border-color: #2871d5;color: #fff;}
        }
      }
      .number{height: 60/@rem;overflow: hidden;padding-bottom: 30/@rem;
        input{float: left;background: none;border: 0;border-bottom: 1px solid #b5cde1;height: 60/@rem;width: 150/@rem;text-align: center;color: #6690bc;font-size: 24/@rem;border-radius: 0;line-height: 24/@rem;
          &::-webkit-input-placeholder{color: #6690bc;line-height: 32/@rem;}
        }
        span{float: left;padding: 0 20/@rem;line-height: 60/@rem;color: #2871d5;font-size: 34/@rem;}
      }
    }
  }
}


//分享弹出框
.share-box{
  position: fixed;top: 0;left: 0;bottom: 0;width: 100%;max-width: @sreen;background-color: rgba(0,0,0,0.8);z-index: 10;
  img{float: right;width: 190/@rem;margin-top: 30/@rem;margin-right: 90/@rem;}
}
//提示弹出框（自动关闭）
.prompt{
  position: fixed;width: 366/@rem;height: 220/@rem;top: 50%;left: 50%;margin-top: -110/@rem;margin-left: -183/@rem;border-radius: 10px;background-color: rgba(0,0,0,0.8);z-index: 10;
  display: table;
  p{display: table-cell;vertical-align: middle;color: #fff;text-align: center;line-height: 50/@rem;font-size: 30/@rem;padding: 30/@rem;}
}


@media (min-width: @sreen) {
  body{width: @sreen;margin: 0 auto;}
}

@keyframes topBottom {
  0%,100%{
    transform: translate3d(0,-15px,0);
  }
  50%{
    transform: translate3d(0,15px,0);
  }
}